﻿@using Shp.Web.Controllers;

@{
    ViewBag.Title = "MegaMenu";
    Layout = "~/Views/Shared/_Layout.ForMenu.cshtml";
}

<div class="sf-menu-cntr-out menu-buffer-for-demo-only">
@Html.MvcContrib().Menu(settings => {
    settings.RootMenuContainerClass = "sf-menu";
    settings.RootMenuItemsClass = "sf-root";
}).Items(menu => {
    menu.Action<HomeController>(c => c.Index(), "Home");
    menu.Link("Products").Items(sub => {
        sub.Content(
            @<div class="sub products clearfix">
                <div class="p-list">               
                    <h2>Desktop</h2>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                </div>
                <div class="p-list">               
                    <h2>Laptop</h2>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                </div>
                <div class="p-list">               
                    <h2>Accessories</h2>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                </div>
                <div class="p-list">               
                    <h2>More Accessories</h2>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                    <div><a href="#">Navigation Link</a></div>
                </div>
            </div>
        );
        /* class sf-shadow-off removes shadowing */
    }).ListAttributes(style => "width: 550px;", @class => "sf-shadow-off");
    menu.Link("Sale Items").Items(sub => {
        sub.Content(
            @<div class="sub hot-deals">
                <div class="clearfix">
                    <div class="p-list p-list-50">               
                        <h2>Deal of the Week</h2>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>                    
                    </div>
                    <div class="p-list p-list-50">               
                        <h2>Clearance Items</h2>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                        <div><a href="#">Navigation Link - specials here!</a></div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="p-list p-list-33">               
                        <h2>Deal of the Week</h2>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>                    
                    </div>
                    <div class="p-list p-list-33">               
                        <h2>Clearance Items</h2>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>                    
                    </div>
                    <div class="p-list p-list-33">               
                        <h2>Open Box Specials</h2>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>
                        <div><a href="#">Navigation Link</a></div>                    
                    </div>
                </div>
            </div>
        );
        /* class sf-shadow-off removes shadowing */
    }).ListAttributes(style => "width: 450px;", @class => "sf-shadow-off");
    menu.Link("Community");
    //menu.Link(Url.Content("~/Content/ico/application_key.png"));
    menu.Link("Store Locator").Items(sub => {
        sub.Link("North America");
        sub.Link("South America");
        sub.Link("Europe");
        sub.Link("East Asia").Items(sub0 => {
            // render a sub-mega-menu
            sub0.Content(
                @:@Html.Partial("_megamenu.sales")
            );
        }).ListAttributes(style => "width: 450px;", @class => "sf-shadow-off");
        sub.Link("West Asia");
        sub.Link("Middle East");
        sub.Link("Far East");
        sub.Link("Down Under");
    });
    menu.Action<MenuController>(c => c.Index(), "Menu Home");
})
</div>
<script type="text/javascript">
    $(function () {
        // animation options are necessary to avoid IE animation opacity bleeding - caused by IE filtering
        var animationOptions = ($.support.opacity) ? { opacity: 'show', height: 'show'} : { height: 'show' };
        $('ul.sf-menu').superfish({
            hoverClass: 'sfHover',
            delay: 250,
            animation: animationOptions,
            speed: 'fast',
            autoArrows: true,
            dropShadows: true,
            disableHI: true
        });
    });
</script>

@section Head{
    <link href="@Url.Content("~/Content/css/superfish.mc.black.css")" rel="stylesheet" type="text/css" />  
    <style type="text/css">            
        .sf-menu-cntr-out { padding-left: 20px;}        
    </style>
}

@{   
    ViewBag.CodeViewType = Shp.Web.Models.GridCodeViewType.MegaMenu;
}
@Html.Partial("_codeviewer")